<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0,viewport-fit=cover"><title>如何在react使用tinymce富文本编辑器 | 刘超的博客</title><meta name="author" content="刘超"><meta name="copyright" content="刘超"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="文档&nbsp;&nbsp;&nbsp;&nbsp;官方文档&nbsp;&nbsp;&nbsp;&nbsp;中文文档 下载tinymcenpm install --save @tinymce&#x2F;tinymce-react 或者yarn add @tinymce&#x2F;tinymce-react -D  在public中引入tinymce的静态文件 下载地址    https:&#x2F;&#x2F;files.cnblogs">
<meta property="og:type" content="article">
<meta property="og:title" content="如何在react使用tinymce富文本编辑器">
<meta property="og:url" content="https://leachliu.gitee.io/2022/08/11/react/%E4%BD%BF%E7%94%A8tinymce%E5%AF%8C%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91%E5%99%A8/index.html">
<meta property="og:site_name" content="刘超的博客">
<meta property="og:description" content="文档&nbsp;&nbsp;&nbsp;&nbsp;官方文档&nbsp;&nbsp;&nbsp;&nbsp;中文文档 下载tinymcenpm install --save @tinymce&#x2F;tinymce-react 或者yarn add @tinymce&#x2F;tinymce-react -D  在public中引入tinymce的静态文件 下载地址    https:&#x2F;&#x2F;files.cnblogs">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://leachliu.gitee.io/images/avatar.webp">
<meta property="article:published_time" content="2022-08-10T16:00:00.000Z">
<meta property="article:modified_time" content="2023-11-03T07:37:06.447Z">
<meta property="article:author" content="刘超">
<meta property="article:tag" content="tinymce">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://leachliu.gitee.io/images/avatar.webp"><link rel="shortcut icon" href="/images/favicon.ico"><link rel="canonical" href="https://leachliu.gitee.io/2022/08/11/react/%E4%BD%BF%E7%94%A8tinymce%E5%AF%8C%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91%E5%99%A8/index.html"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = {
  root: '/',
  algolia: {"appId":"VFZO06XK8A","apiKey":"1202cec78a85d208874b3c9cbcd0e212","indexName":"index total","hits":{"per_page":10},"languages":{"input_placeholder":"搜索文章","hits_empty":"找不到您查询的内容：${query}","hits_stats":"找到 ${hits} 条结果，用时 ${time} 毫秒"}},
  localSearch: undefined,
  translate: undefined,
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '',
  dateSuffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: undefined,
  infinitegrid: {
    js: 'https://cdn.jsdelivr.net/npm/@egjs/infinitegrid/dist/infinitegrid.min.js',
    buttonText: '加载更多'
  },
  isPhotoFigcaption: false,
  islazyload: false,
  isAnchor: false,
  percent: {
    toc: true,
    rightside: false,
  },
  autoDarkmode: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: '如何在react使用tinymce富文本编辑器',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2023-11-03 15:37:06'
}</script><script>(win=>{
      win.saveToLocal = {
        set: (key, value, ttl) => {
          if (ttl === 0) return
          const now = Date.now()
          const expiry = now + ttl * 86400000
          const item = {
            value,
            expiry
          }
          localStorage.setItem(key, JSON.stringify(item))
        },
      
        get: key => {
          const itemStr = localStorage.getItem(key)
      
          if (!itemStr) {
            return undefined
          }
          const item = JSON.parse(itemStr)
          const now = Date.now()
      
          if (now > item.expiry) {
            localStorage.removeItem(key)
            return undefined
          }
          return item.value
        }
      }
    
      win.getScript = (url, attr = {}) => new Promise((resolve, reject) => {
        const script = document.createElement('script')
        script.src = url
        script.async = true
        script.onerror = reject
        script.onload = script.onreadystatechange = function() {
          const loadState = this.readyState
          if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
          script.onload = script.onreadystatechange = null
          resolve()
        }

        Object.keys(attr).forEach(key => {
          script.setAttribute(key, attr[key])
        })

        document.head.appendChild(script)
      })
    
      win.getCSS = (url, id = false) => new Promise((resolve, reject) => {
        const link = document.createElement('link')
        link.rel = 'stylesheet'
        link.href = url
        if (id) link.id = id
        link.onerror = reject
        link.onload = link.onreadystatechange = function() {
          const loadState = this.readyState
          if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
          link.onload = link.onreadystatechange = null
          resolve()
        }
        document.head.appendChild(link)
      })
    
      win.activateDarkMode = () => {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = () => {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
        if (t === 'dark') activateDarkMode()
        else if (t === 'light') activateLightMode()
      
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
      const detectApple = () => {
        if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
          document.documentElement.classList.add('apple')
        }
      }
      detectApple()
    })(window)</script><link rel="stylesheet" href="https://npm.elemecdn.com/ethan4116-blog/lib/css/plane_v2.css"><link rel="stylesheet" href="https://fastly.jsdelivr.net/gh/l-lin/font-awesome-animation/dist/font-awesome-animation.min.css"  media="defer" onload="this.media='all'"><script defer src="/js/custom.js"></script><link rel="stylesheet" href="https://fastly.jsdelivr.net/gh/HCLonely/images@master/others/heartbeat.min.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/custom.css"><!-- hexo injector head_end start --><link rel="stylesheet" href="https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/font-awesome-animation.min.css" media="defer" onload="this.media='all'"><link rel="stylesheet" href="https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/tag_plugins.css" media="defer" onload="this.media='all'"><script src="https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/carousel-touch.js"></script><!-- hexo injector head_end end --><meta name="generator" content="Hexo 7.0.0"></head><body><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="/images/avatar.webp" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">41</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">21</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">6</div></a></div><hr class="custom-hr"/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="not-top-img" id="page-header"><nav id="nav"><span id="blog-info"><a href="/" title="刘超的博客"><span class="site-name">刘超的博客</span></a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search" href="javascript:void(0);"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page" href="javascript:void(0);"><i class="fas fa-bars fa-fw"></i></a></div></div></nav></header><main class="layout" id="content-inner"><div id="post"><div id="post-info"><h1 class="post-title">如何在react使用tinymce富文本编辑器</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-08-10T16:00:00.000Z" title="发表于 2022-08-11 00:00:00">2022-08-11</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2023-11-03T07:37:06.447Z" title="更新于 2023-11-03 15:37:06">2023-11-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/react/">react</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="如何在react使用tinymce富文本编辑器"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div><article class="post-content" id="article-container"><h2 id="文档"><a href="#文档" class="headerlink" title="文档"></a>文档</h2><p>&nbsp;&nbsp;&nbsp;&nbsp;<a href="www.tiny.cloud">官方文档</a><br>&nbsp;&nbsp;&nbsp;&nbsp;<a target="_blank" rel="noopener" href="http://tinymce.ax-z.cn/">中文文档</a></p>
<h2 id="下载tinymce"><a href="#下载tinymce" class="headerlink" title="下载tinymce"></a>下载tinymce</h2><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">npm install --save @tinymce/tinymce-react </span><br><span class="line">或者</span><br><span class="line">yarn add @tinymce/tinymce-react -D</span><br></pre></td></tr></table></figure>

<h2 id="在public中引入tinymce的静态文件"><a href="#在public中引入tinymce的静态文件" class="headerlink" title="在public中引入tinymce的静态文件"></a>在public中引入tinymce的静态文件</h2><p> <a target="_blank" rel="noopener" href="https://files.cnblogs.com/files/uimeigui/tinymce.zip">下载地址</a><br>    <figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="attr">https</span>:<span class="comment">//files.cnblogs.com/files/uimeigui/tinymce.zip</span></span><br></pre></td></tr></table></figure></p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;如果下载之后不能使用，请使用官方<a target="_blank" rel="noopener" href="http://tinymce.ax-z.cn/download-all.php">下载地址</a>, 下载之后引入到react的public的index.html中的head位置引入tinymce.min.js。</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">&lt;script src=<span class="string">&quot;%PUBLIC_URL%/tinymce/tinymce.min.js&quot;</span>&gt;&lt;script&gt; </span><br><span class="line"><span class="comment">// 我的文件路径 根据存放的tinyme路径 更改相对应的路径</span></span><br></pre></td></tr></table></figure>
<p>&nbsp;&nbsp;&nbsp;&nbsp;此举是为了解决tinyMce出现慢的问题，如果tinymce在首次加载的时候找不到，会去云服务器找，网速慢的话请求资源会很慢，所以我们采用自托管的模式,自己在项目中引用资源<br><img src=""></p>
<h2 id="获取tinymce富文本框内容的几种方式"><a href="#获取tinymce富文本框内容的几种方式" class="headerlink" title="获取tinymce富文本框内容的几种方式"></a>获取tinymce富文本框内容的几种方式</h2><ul>
<li>如果当前页面只有一个编辑器<br>&nbsp;获取内容：tinyMCE.activeEditor.getContent()<br>&nbsp;设置内容：tinyMCE.activeEditor.setContent(“需要设置的编辑器内容”)<br>&nbsp;</li>
<li>如果当前页面有多个编辑器（下面的“[0]”表示第一个编辑器，以此类推）<br>&nbsp;获取内容：tinyMCE.editors[0].getContent()<br>&nbsp;设置内容：tinyMCE.editors[0].setContent(“需要设置的编辑器内容”)<br>&nbsp;</li>
<li>获取不带HTML标记的纯文本内容<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> activeEditor = tinymce.<span class="property">activeEditor</span>;</span><br><span class="line"><span class="keyword">var</span> editBody = activeEditor.<span class="title function_">getBody</span>();</span><br><span class="line">activeEditor.<span class="property">selection</span>.<span class="title function_">select</span>(editBody);</span><br><span class="line"><span class="comment">//纯文本内容</span></span><br><span class="line"><span class="keyword">var</span> text = activeEditor.<span class="property">selection</span>.<span class="title function_">getContent</span>(&#123;</span><br><span class="line">    <span class="string">&#x27;format&#x27;</span>: <span class="string">&#x27;text&#x27;</span></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure></li>
</ul>
<h2 id="常用配置"><a href="#常用配置" class="headerlink" title="常用配置"></a>常用配置</h2><ul>
<li>language<br>指定语言，String，值区分大小写。</li>
<li>language_url，<a target="_blank" rel="noopener" href="https://www.tiny.cloud/get-tiny/language-packages/">汉化包下载地址</a><br>汉化包路径，也可以直接添加到public文件夹下的 tinymce 下里面新增langs文件夹，直接指定语言即可</li>
<li>height<br>设置整个编辑器的高度，包括菜单栏、工具栏和状态栏,如果提供了数字，TinyMCE 以像素为单位设置高度。如果提供了字符串，TinyMCE 假定该值是有效的 CSS，并将编辑器的高度设置为字符串值。这允许备用单元，例如%，em，和vh。(测试%不起作用)</li>
<li>readonly<br>只读，Boolean，将编辑器设置成只读模式，不可编辑。</li>
<li>plugins<br>指定需加载的插件，String或Array，此插件必须已存在plugins目录内；若使用String值，多个插件用空格分隔；默认不会加载任何插件，支持自写插件。<br>可选插件配置：<a target="_blank" rel="noopener" href="http://www.tiny.cloud/docs/plugins/opensource/advlist/">www.tiny.cloud/docs/plugins/opensource/advlist/</a> (官方文档) <a target="_blank" rel="noopener" href="http://tinymce.ax-z.cn/plugins/advlist.php">http://tinymce.ax-z.cn/plugins/advlist.php</a> (中文文档)</li>
<li>toolbar<br>自定义工具栏，Boolean或String或Array；为false时将关闭工具栏；String值时用于自定义工具栏，例：toolbar:”link | preview”，值中可插入“|”分组；支持多级工具栏,例：toolbar1:””,toolbar2:””；<br>官网：<a target="_blank" rel="noopener" href="http://www.tiny.cloud/docs/configure/editor-appearance/#toolbar">www.tiny.cloud/docs/configure/editor-appearance/#toolbar</a><br>中文文档: <a target="_blank" rel="noopener" href="http://tinymce.ax-z.cn/general/basic-setup.php#toolbarconfiguration">http://tinymce.ax-z.cn/general/basic-setup.php#toolbarconfiguration</a></li>
<li>placeholder<br>内容预展示文本，String值。</li>
<li>resize<br>调整编辑器大小工具，编辑器右下角有一个可以拖动的标记，鼠标按住它可以改变编辑器的大小。默认resize: true；可选值为：true（仅允许改变高度）, false（完全不让你动）, ‘both’（宽高都能改变，注意引号）。</li>
</ul>
<h2 id="图片上传"><a href="#图片上传" class="headerlink" title="图片上传"></a>图片上传</h2>   <figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"> tinymce.<span class="title function_">init</span>(&#123;</span><br><span class="line">   <span class="attr">selector</span>: <span class="string">&#x27;#tinydemo&#x27;</span>,</span><br><span class="line">   <span class="attr">language</span>: <span class="string">&#x27;zh_CN&#x27;</span>,</span><br><span class="line">   <span class="attr">plugins</span>: <span class="string">&#x27;image&#x27;</span>, <span class="comment">//使用image插件</span></span><br><span class="line">   <span class="attr">toolbar</span>: <span class="string">&#x27;image&#x27;</span>, <span class="comment">//工具栏显示</span></span><br><span class="line">   <span class="attr">images_upload_url</span>: <span class="string">&#x27;/api/controller/action&#x27;</span>, <span class="comment">//用于指定一个接收上传文件的后端处理程序地址</span></span><br><span class="line">   <span class="attr">images_upload_base_path</span>: <span class="string">&#x27;/demo&#x27;</span>, <span class="comment">//如果返回的地址是相对路径，此参数可以给相对路径指定它所相对的基本路径</span></span><br><span class="line">&#125;);   </span><br></pre></td></tr></table></figure>
<p>   &nbsp;&nbsp;&nbsp;&nbsp;跨域问题：如果TinyMCE和接受上传图片程序未在同一域名下，浏览器会因跨域问题而拒绝操作，后端程序返回结果时，需给浏览器一个允许跨域的指令。<br>   &nbsp;&nbsp;&nbsp;&nbsp;图片上传扩展参数</p>
<table>
<thead>
<tr>
<th>名称</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td>images_upload_credentials</td>
<td>对images_upload_url中指定的地址调用时是否传递cookie等跨域的凭据。值为布尔值，默认false。</td>
</tr>
<tr>
<td>images_upload_handler（图片上传自定义实现）</td>
<td>此选项允许你使用自定义函数代替TinyMCE来处理上传操作。该自定义函数需提供4个参数：blobInfo、成功回调和失败回调、上传进度（取值1-100）。</td>
</tr>
</tbody></table>
  <figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">//以下为自定义上传实现的一个代码示例</span></span><br><span class="line">tinymce.<span class="title function_">init</span>(&#123;</span><br><span class="line">   <span class="attr">selector</span>: <span class="string">&#x27;#tinydemo&#x27;</span>,</span><br><span class="line">   <span class="attr">images_upload_handler</span>: <span class="keyword">function</span>(<span class="params">blobInfo, success, failure, progress</span>) &#123;</span><br><span class="line">       <span class="keyword">var</span> xhr, formData;</span><br><span class="line">       xhr = <span class="keyword">new</span> <span class="title class_">XMLHttpRequest</span>();</span><br><span class="line">       xhr.<span class="property">withCredentials</span> = <span class="literal">false</span>;</span><br><span class="line">       xhr.<span class="title function_">open</span>(<span class="string">&#x27;POST&#x27;</span>, <span class="string">&#x27;action&#x27;</span>);</span><br><span class="line">    </span><br><span class="line">       xhr.<span class="property">upload</span>.<span class="property">onprogress</span> = <span class="keyword">function</span>(<span class="params">e</span>) &#123;</span><br><span class="line">           <span class="title function_">progress</span>(e.<span class="property">loaded</span> / e.<span class="property">total</span> * <span class="number">100</span>);</span><br><span class="line">       &#125;</span><br><span class="line">    </span><br><span class="line">       xhr.<span class="property">onload</span> = <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">           <span class="keyword">var</span> json;</span><br><span class="line">           <span class="keyword">if</span> (xhr.<span class="property">status</span> == <span class="number">403</span>) &#123;</span><br><span class="line">               <span class="title function_">failure</span>(<span class="string">&#x27;HTTP Error: &#x27;</span> + xhr.<span class="property">status</span>, &#123;</span><br><span class="line">                   <span class="attr">remove</span>: <span class="literal">true</span></span><br><span class="line">               &#125;);</span><br><span class="line">               <span class="keyword">return</span>;</span><br><span class="line">           &#125;</span><br><span class="line">           <span class="keyword">if</span> (xhr.<span class="property">status</span> &lt; <span class="number">200</span> || xhr.<span class="property">status</span> &gt;= <span class="number">300</span>) &#123;</span><br><span class="line">               <span class="title function_">failure</span>(<span class="string">&#x27;HTTP Error: &#x27;</span> + xhr.<span class="property">status</span>);</span><br><span class="line">               <span class="keyword">return</span>;</span><br><span class="line">           &#125;</span><br><span class="line">           json = <span class="title class_">JSON</span>.<span class="title function_">parse</span>(xhr.<span class="property">responseText</span>);</span><br><span class="line">           <span class="keyword">if</span> (!json || <span class="keyword">typeof</span> json.<span class="property">location</span> != <span class="string">&#x27;string&#x27;</span>) &#123;</span><br><span class="line">               <span class="title function_">failure</span>(<span class="string">&#x27;Invalid JSON: &#x27;</span> + xhr.<span class="property">responseText</span>);</span><br><span class="line">               <span class="keyword">return</span>;</span><br><span class="line">           &#125;</span><br><span class="line">           <span class="title function_">success</span>(json.<span class="property">location</span>);</span><br><span class="line">       &#125;;</span><br><span class="line">    </span><br><span class="line">       xhr.<span class="property">onerror</span> = <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">           <span class="title function_">failure</span>(<span class="string">&#x27;Image upload failed due to a XHR Transport error. Code: &#x27;</span> + xhr.<span class="property">status</span>);</span><br><span class="line">       &#125;</span><br><span class="line">    </span><br><span class="line">       formData = <span class="keyword">new</span> <span class="title class_">FormData</span>();</span><br><span class="line">       formData.<span class="title function_">append</span>(<span class="string">&#x27;file&#x27;</span>, blobInfo.<span class="title function_">blob</span>(), blobInfo.<span class="title function_">filename</span>());</span><br><span class="line">    </span><br><span class="line">       xhr.<span class="title function_">send</span>(formData);</span><br><span class="line">   &#125;</span><br><span class="line"> &#125;);</span><br></pre></td></tr></table></figure>

<h2 id="自定义菜单按钮上传照片"><a href="#自定义菜单按钮上传照片" class="headerlink" title="自定义菜单按钮上传照片"></a>自定义菜单按钮上传照片</h2><h3 id="自定义按钮"><a href="#自定义按钮" class="headerlink" title="自定义按钮"></a>自定义按钮</h3><ul>
<li>需要在toobar(工具栏添加)addMedia(自定以,名字自己设置)</li>
<li>在editor配置中添加setUp 定义一个匿名函数,这里操作有2步<ul>
<li>创建自定义工具按钮</li>
<li>点击按钮后 弹窗出现<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">//菜单栏</span></span><br><span class="line"><span class="attr">toolbar</span>: [<span class="string">&#x27;addMedia&#x27;</span>],</span><br><span class="line"><span class="comment">//自定义添加按钮 弹窗事件</span></span><br><span class="line"><span class="attr">setup</span>: <span class="keyword">function</span> (<span class="params">editor</span>) &#123;</span><br><span class="line">  <span class="title function_">setEditor</span>(editor);</span><br><span class="line">  editor.<span class="property">ui</span>.<span class="property">registry</span>.<span class="title function_">addButton</span>(<span class="string">&#x27;addMedia&#x27;</span>, &#123;</span><br><span class="line">    <span class="attr">text</span>: <span class="string">&#x27;&#x27;</span>,</span><br><span class="line">    <span class="attr">icon</span>: <span class="string">&#x27;embed&#x27;</span>, <span class="comment">//图标名称需要是tinymce内置的图标</span></span><br><span class="line">    <span class="attr">onAction</span>: <span class="function">() =&gt;</span> &#123;</span><br><span class="line">      <span class="title function_">addAutoMedia</span>(); <span class="comment">//需要触发的方法</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ul>
</li>
</ul>
<h3 id="弹窗事件回调"><a href="#弹窗事件回调" class="headerlink" title="弹窗事件回调"></a>弹窗事件回调</h3><ul>
<li>打开浮动窗口后，点击里面按钮，上传照片插入到tinymce编辑中,添加以下代码上传到s3之后，获取照片资源路径,代码如下  <figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">  <span class="comment">//暴露的 自定义菜单栏按钮打开弹窗</span></span><br><span class="line">  <span class="keyword">const</span> <span class="title function_">addAutoMedia</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">        mediaRef.<span class="property">current</span>.<span class="title function_">open</span>();</span><br><span class="line">  &#125;;</span><br><span class="line">  <span class="comment">//自定义弹窗 使用fowardRef包裹子组件,配合useImperativeHandle暴露子组件方法</span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">MediaModal</span> <span class="attr">ref</span>=<span class="string">&#123;mediaRef&#125;</span> <span class="attr">onChangeEditor</span>=<span class="string">&#123;onChangeEditor&#125;</span> /&gt;</span></span></span><br><span class="line">  </span><br><span class="line">  <span class="comment">//onChangeEditor父组件的回调方法</span></span><br><span class="line">  <span class="keyword">const</span> onChangeEditor = (<span class="attr">value</span>: &#123; <span class="attr">url</span>: string; <span class="attr">title</span>: string;   <span class="attr">alt_title</span>: string; <span class="attr">url_cover</span>: string &#125;):<span class="function"><span class="params">void</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">const</span> &#123; url, title, alt_title, url_cover &#125; = value;</span><br><span class="line">  <span class="keyword">const</span> mediaType = videoSetList.<span class="title function_">has</span>(<span class="title function_">str</span>(url));</span><br><span class="line">  <span class="comment">//重点 使用editor的实例去插入更细内容 分别是照片 或者是视频</span></span><br><span class="line">  !mediaType</span><br><span class="line">    ? editor.<span class="title function_">insertContent</span>(</span><br><span class="line">        <span class="string">`&lt;p&gt;</span></span><br><span class="line"><span class="string">          &lt;img src=<span class="subst">$&#123;url&#125;</span> width=&quot;100%&quot;  alt=<span class="subst">$&#123;<span class="built_in">JSON</span>.stringify(alt_title)&#125;</span> title=<span class="subst">$&#123;<span class="built_in">JSON</span>.stringify(</span></span></span><br><span class="line"><span class="subst"><span class="string">          title</span></span></span><br><span class="line"><span class="subst"><span class="string">        )&#125;</span> /&gt;</span></span><br><span class="line"><span class="string">         &lt;/p&gt;`</span></span><br><span class="line">      )</span><br><span class="line">    : editor.<span class="title function_">insertContent</span>(</span><br><span class="line">        <span class="string">`&lt;p&gt; </span></span><br><span class="line"><span class="string">          &lt;video src=<span class="subst">$&#123;url&#125;</span> poster=<span class="subst">$&#123;url_cover&#125;</span> width=&quot;100%&quot; style=&quot;width:100%&quot; controlsList=&quot;noplaybackrate&quot; controls=&quot;controls&quot;/&gt;</span></span><br><span class="line"><span class="string">         &lt;p&gt;`</span></span><br><span class="line">      );</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure></li>
</ul>
<h2 id="文件上传"><a href="#文件上传" class="headerlink" title="文件上传"></a>文件上传</h2><p>   业务需求没有用到文件上传,详细请看<a target="_blank" rel="noopener" href="http://tinymce.ax-z.cn/general/upload-images.php">官方实例</a></p>
<h2 id="封装组件"><a href="#封装组件" class="headerlink" title="封装组件"></a>封装组件</h2><h3 id="完整代码如下"><a href="#完整代码如下" class="headerlink" title="完整代码如下"></a>完整代码如下</h3><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">React</span>, &#123; useRef, useState &#125; <span class="keyword">from</span> <span class="string">&#x27;react&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; <span class="title class_">Editor</span> &#125; <span class="keyword">from</span> <span class="string">&#x27;@tinymce/tinymce-react&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; imgUpload &#125; <span class="keyword">from</span> <span class="string">&#x27;@/common/s3service&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="title class_">MediaModal</span> <span class="keyword">from</span> <span class="string">&#x27;../mediaModal&#x27;</span>;</span><br><span class="line"><span class="keyword">const</span> videoSetList = <span class="keyword">new</span> <span class="title class_">Set</span>([<span class="string">&#x27;mp4&#x27;</span>, <span class="string">&#x27;video/mp4&#x27;</span>, <span class="string">&#x27;video/avi&#x27;</span>, <span class="string">&#x27;video/flv&#x27;</span>]);</span><br><span class="line"></span><br><span class="line">interface <span class="title class_">EditorComProps</span> &#123;</span><br><span class="line">  value?: stirng;</span><br><span class="line">  onChange?: <span class="function"><span class="params">data</span> =&gt;</span> <span class="keyword">void</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="title class_">EditorCom</span>: <span class="title class_">React</span>.<span class="property">FC</span>&lt;<span class="title class_">EditorComProps</span>&gt; = <span class="function">(<span class="params">props: EditorComProps</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">const</span> &#123; value, onChange &#125; = props;</span><br><span class="line">  <span class="keyword">const</span> [editor, setEditor] = <span class="title function_">useState</span>();</span><br><span class="line">  <span class="keyword">const</span> mediaRef = <span class="title function_">useRef</span>(&#123;</span><br><span class="line">    <span class="attr">open</span>: <span class="title class_">Function</span></span><br><span class="line">  &#125;);</span><br><span class="line">  <span class="keyword">const</span> editorRef = <span class="title function_">useRef</span>(<span class="literal">null</span>);</span><br><span class="line"></span><br><span class="line">  <span class="keyword">let</span> <span class="title function_">handleEditorChange</span> = (<span class="params">content, editor</span>) =&gt; &#123;</span><br><span class="line">    <span class="comment">//父组件的回调方法 自己定义 content是输入的内容 </span></span><br><span class="line">    <span class="comment">//editor是编辑器实例</span></span><br><span class="line">    onChange &amp;&amp; <span class="title function_">onChange</span>(content);</span><br><span class="line">  &#125;;</span><br><span class="line"></span><br><span class="line">  <span class="comment">//上传图片 使用tinymce内置的上传照片菜单按钮</span></span><br><span class="line">  <span class="keyword">let</span> images_upload_handler = <span class="keyword">async</span> (blob, <span class="attr">success</span>: any, fail,progress): <span class="title class_">Promise</span>&lt;<span class="keyword">void</span>&gt; =&gt; &#123;</span><br><span class="line">    <span class="comment">//s3上传图片</span></span><br><span class="line">    <span class="keyword">let</span> <span class="attr">data</span>: any = <span class="keyword">await</span> <span class="title function_">imgUpload</span>(&#123; <span class="attr">file</span>: blob.<span class="title function_">blob</span>() &#125;);</span><br><span class="line">    data.<span class="property">status</span> === <span class="string">&#x27;success&#x27;</span> ? <span class="title function_">success</span>(data.<span class="property">url</span>) : <span class="title function_">fail</span>(data.<span class="property">status</span>);</span><br><span class="line">  &#125;;</span><br><span class="line"></span><br><span class="line">  <span class="comment">//自定义菜单栏按钮打开弹窗</span></span><br><span class="line">  <span class="keyword">const</span> <span class="title function_">addAutoMedia</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">    mediaRef.<span class="property">current</span>.<span class="title function_">open</span>();</span><br><span class="line">  &#125;;</span><br><span class="line">  </span><br><span class="line">  <span class="comment">//对文件名进行处理</span></span><br><span class="line">  <span class="keyword">const</span> str = &lt;T <span class="keyword">extends</span> string&gt;(<span class="attr">str</span>: T): <span class="function"><span class="params">string</span> =&gt;</span></span><br><span class="line">    str &amp;&amp; str.<span class="title function_">substring</span>(str.<span class="title function_">lastIndexOf</span>(<span class="string">&#x27;.&#x27;</span>) + <span class="number">1</span>, str.<span class="property">length</span>);</span><br><span class="line">  </span><br><span class="line">  <span class="comment">//自定义上传照片</span></span><br><span class="line">  <span class="keyword">const</span> onChangeEditor = (<span class="attr">value</span>: &#123; <span class="attr">url</span>: string; <span class="attr">title</span>: string;   <span class="attr">alt_title</span>: string; <span class="attr">url_cover</span>: string &#125;):<span class="function"><span class="params">void</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(value);</span><br><span class="line">    <span class="keyword">const</span> &#123; url, title, alt_title, url_cover &#125; = value;</span><br><span class="line">    <span class="keyword">const</span> mediaType = videoSetList.<span class="title function_">has</span>(<span class="title function_">str</span>(url));</span><br><span class="line">    !mediaType</span><br><span class="line">      ? editor.<span class="title function_">insertContent</span>(</span><br><span class="line">          <span class="string">`&lt;p&gt;</span></span><br><span class="line"><span class="string">            &lt;img src=<span class="subst">$&#123;url&#125;</span> width=&quot;100%&quot;  alt=<span class="subst">$&#123;<span class="built_in">JSON</span>.stringify(alt_title)&#125;</span> title=<span class="subst">$&#123;<span class="built_in">JSON</span>.stringify(</span></span></span><br><span class="line"><span class="subst"><span class="string">            title</span></span></span><br><span class="line"><span class="subst"><span class="string">          )&#125;</span> /&gt;</span></span><br><span class="line"><span class="string">           &lt;/p&gt;`</span></span><br><span class="line">        )</span><br><span class="line">      : editor.<span class="title function_">insertContent</span>(</span><br><span class="line">          <span class="string">`&lt;p&gt; </span></span><br><span class="line"><span class="string">            &lt;video src=<span class="subst">$&#123;url&#125;</span> poster=<span class="subst">$&#123;url_cover&#125;</span> width=&quot;100%&quot; style=&quot;width:100%&quot; controlsList=&quot;noplaybackrate&quot; controls=&quot;controls&quot;/&gt;</span></span><br><span class="line"><span class="string">           &lt;p&gt;`</span></span><br><span class="line">        );</span><br><span class="line">  &#125;;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;&gt;</span></span></span><br><span class="line"><span class="language-xml">      <span class="tag">&lt;<span class="name">Editor</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml">        <span class="attr">value</span>=<span class="string">&#123;value&#125;</span> //<span class="attr">父组件传的值</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml">        <span class="attr">onEditorChange</span>=<span class="string">&#123;handleEditorChange&#125;</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml">        //<span class="attr">指向第二步下载到public目录下的tinymce静态文件</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml">        <span class="attr">tinymceScriptSrc</span>=<span class="string">&#123;</span>&#x27;/<span class="attr">public</span>/<span class="attr">tinymce</span>/<span class="attr">js</span>/<span class="attr">tinymce</span>/<span class="attr">tinymce.min.js</span>&#x27;&#125;</span></span></span><br><span class="line"><span class="tag"><span class="language-xml">        <span class="attr">init</span>=<span class="string">&#123;&#123;</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml">          //<span class="attr">skin:</span>&#x27;<span class="attr">oxide-dark</span>&#x27;, //<span class="attr">编辑器皮肤</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml">          <span class="attr">custom_ui_selector:</span> &#x27;<span class="attr">body</span>&#x27;, // <span class="attr">聚焦的元素</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml">          <span class="attr">auto_focus:</span> <span class="attr">true</span>,  // <span class="attr">自动获得焦点</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml">          // <span class="attr">forced_root_block:</span> &#x27;&#x27;, // <span class="attr">去除换行自动添加p标签</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml">          <span class="attr">toolbar_sticky:</span> <span class="attr">true</span>,</span></span></span><br><span class="line"><span class="tag"><span class="language-xml">          <span class="attr">toolbar_mode:</span> &#x27;<span class="attr">wrap</span>&#x27;,</span></span></span><br><span class="line"><span class="tag"><span class="language-xml">          <span class="attr">branding:</span> <span class="attr">false</span>, //<span class="attr">去掉商标消息</span>” <span class="attr">Powered</span> <span class="attr">by</span> <span class="attr">TinyMCE</span>”</span></span></span><br><span class="line"><span class="tag"><span class="language-xml">          <span class="attr">statusbar:</span> <span class="attr">false</span>, // <span class="attr">隐藏编辑器底部的状态栏</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml">          <span class="attr">tooltip:</span> <span class="attr">true</span>,</span></span></span><br><span class="line"><span class="tag"><span class="language-xml">          // <span class="attr">valid_children:</span> &#x27;+<span class="attr">body</span>[<span class="attr">style</span>],<span class="attr">span</span>&#x27;,</span></span></span><br><span class="line"><span class="tag"><span class="language-xml">          // <span class="attr">TinyMCE禁用转义</span> <span class="attr">禁止使其他语言转化为特殊字符</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml">          <span class="attr">entity_encoding:</span> &#x27;<span class="attr">raw</span>&#x27;,</span></span></span><br><span class="line"><span class="tag"><span class="language-xml">          //<span class="attr">自定义编辑器样式</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml">          <span class="attr">content_style:</span> &#x27;<span class="attr">body</span> &#123;<span class="attr">font-family:</span>&quot;<span class="attr">Open</span> <span class="attr">Sans</span>&quot;&#125;&#x27;,</span></span></span><br><span class="line"><span class="tag"><span class="language-xml">          //<span class="attr">添加字体颜色样式</span> <span class="attr">谷歌字体</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml">          <span class="attr">content_css:</span> [</span></span></span><br><span class="line"><span class="tag"><span class="language-xml">            &#x27;<span class="attr">http:</span>//<span class="attr">fonts.googleapis.com</span>/<span class="attr">css</span>?<span class="attr">family</span>=<span class="string">Open+Sans</span>&#x27;,</span></span></span><br><span class="line"><span class="tag"><span class="language-xml">            &#x27;<span class="attr">http:</span>//<span class="attr">fonts.googleapis.com</span>/<span class="attr">css</span>?<span class="attr">family</span>=<span class="string">Paytone+One</span>&#x27;,</span></span></span><br><span class="line"><span class="tag"><span class="language-xml">            &#x27;<span class="attr">http:</span>//<span class="attr">fonts.googleapis.com</span>/<span class="attr">css</span>?<span class="attr">family</span>=<span class="string">Aclonica</span>&#x27;</span></span></span><br><span class="line"><span class="tag"><span class="language-xml">          ],</span></span></span><br><span class="line"><span class="tag"><span class="language-xml">          //<span class="attr">汉化</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml">          <span class="attr">language:</span> &#x27;<span class="attr">zh_CN</span>&#x27;,</span></span></span><br><span class="line"><span class="tag"><span class="language-xml">          // <span class="attr">去掉菜单栏</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml">          <span class="attr">menubar:</span> <span class="attr">false</span>,</span></span></span><br><span class="line"><span class="tag"><span class="language-xml">          // <span class="attr">扩展有效元素</span> <span class="attr">span标签</span> <span class="attr">添加到源代码中</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml">          <span class="attr">extended_valid_elements:</span> &#x27;<span class="attr">span</span>[<span class="attr">class</span>|<span class="attr">align</span>|<span class="attr">style</span>]&#x27;,</span></span></span><br><span class="line"><span class="tag"><span class="language-xml">          <span class="attr">plugins:</span> //<span class="attr">插件配置</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml">            &#x27;<span class="attr">searchreplace</span> <span class="attr">autolink</span> <span class="attr">directionality</span> <span class="attr">visualblocks</span> <span class="attr">visualchars</span> <span class="attr">fullscreen</span>  <span class="attr">link</span> <span class="attr">code</span> <span class="attr">codesample</span> <span class="attr">template</span> <span class="attr">table</span> <span class="attr">charmap</span> <span class="attr">anchor</span> <span class="attr">insertdatetime</span>&#x27;,</span></span></span><br><span class="line"><span class="tag"><span class="language-xml">          // <span class="attr">powerpaste</span> //<span class="attr">菜单栏配置</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml">          // ** <span class="attr">重点</span> <span class="attr">tinymce文件</span> <span class="attr">版本不同可能导致单词不一样</span> <span class="attr">例如fontsize</span> <span class="attr">fontselect</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml">          <span class="attr">toolbar:</span> [ </span></span></span><br><span class="line"><span class="tag"><span class="language-xml">            &#x27;<span class="attr">code</span> <span class="attr">undo</span> <span class="attr">redo</span> <span class="attr">cut</span> <span class="attr">copy</span> <span class="attr">paste</span> <span class="attr">pastetext</span> <span class="attr">alignleft</span> <span class="attr">aligncenter</span> <span class="attr">alignright</span> <span class="attr">alignjustify</span> <span class="attr">bullist</span> <span class="attr">numlist</span> <span class="attr">outdent</span> <span class="attr">indent</span> <span class="attr">subscript</span> <span class="attr">superscript</span>  <span class="attr">table</span>  <span class="attr">charmap</span>  <span class="attr">hr</span>  <span class="attr">insertdatetime</span> <span class="attr">addMedia</span> <span class="attr">indent2em</span>&#x27;,</span></span></span><br><span class="line"><span class="tag"><span class="language-xml">            &#x27;<span class="attr">styleselect</span> <span class="attr">fontselect</span>  <span class="attr">forecolor</span> <span class="attr">bold</span> <span class="attr">italic</span> <span class="attr">underline</span> <span class="attr">strikethrough</span>   <span class="attr">link</span> <span class="attr">anchor</span>  <span class="attr">blockquote</span> <span class="attr">removeformat</span> <span class="attr">fullscreen</span>&#x27;</span></span></span><br><span class="line"><span class="tag"><span class="language-xml">          ],</span></span></span><br><span class="line"><span class="tag"><span class="language-xml">          // <span class="attr">lineheight</span> <span class="attr">行高</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml">          // <span class="attr">fontsizeselect:</span> <span class="attr">true</span>, //<span class="attr">字体选择</span> <span class="attr">暂时隐藏</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml">          <span class="attr">height:</span> <span class="attr">450</span>, //<span class="attr">编辑器高度</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml">          <span class="attr">min_height:</span> <span class="attr">400</span>,</span></span></span><br><span class="line"><span class="tag"><span class="language-xml">          // <span class="attr">fontsize_formats:</span> &#x27;<span class="attr">8px</span> <span class="attr">10px</span> <span class="attr">12px</span> <span class="attr">14px</span> <span class="attr">16px</span> <span class="attr">18px</span> <span class="attr">24px</span> <span class="attr">36px</span> <span class="attr">48px</span>&#x27;,</span></span></span><br><span class="line"><span class="tag"><span class="language-xml">          <span class="attr">font_formats:</span> </span></span></span><br><span class="line"><span class="tag"><span class="language-xml">            &quot;<span class="attr">Open</span> <span class="attr">Sans</span>=<span class="string">&#x27;Open Sans&#x27;</span>;<span class="attr">微软雅黑</span>=<span class="string">Microsoft</span> <span class="attr">YaHei隶书</span>=<span class="string">&#x27;隶书&#x27;</span>;<span class="attr">幼圆</span>=<span class="string">&#x27;幼圆&#x27;</span>,<span class="attr">OpenSans</span>,<span class="attr">Helvetica</span> <span class="attr">Neue</span>,<span class="attr">PingFang</span> <span class="attr">SC</span>,<span class="attr">苹果苹方</span>=<span class="string">PingFang</span> <span class="attr">SC</span>,<span class="attr">Microsoft</span> <span class="attr">YaHei</span>,<span class="attr">sans-serif</span>;<span class="attr">宋体</span>=<span class="string">simsun,serif;仿宋体</span>=<span class="string">FangSong,serif;黑体</span>=<span class="string">SimHei,sans-serif;Arial</span>=<span class="string">arial;helvetica,sans-serif;Arial</span> <span class="attr">Black</span>=<span class="string">arial</span> <span class="attr">black</span>;<span class="attr">avant</span> <span class="attr">garde</span>;<span class="attr">Book</span> <span class="attr">Antiqua</span>=<span class="string">book</span> <span class="attr">antiqua</span>;<span class="attr">palatino</span>;<span class="attr">Comic</span> <span class="attr">Sans</span> <span class="attr">MS</span>=<span class="string">comic</span> <span class="attr">sans</span> <span class="attr">ms</span>,<span class="attr">sans-serif</span>;<span class="attr">Courier</span> <span class="attr">New</span>=<span class="string">courier</span> <span class="attr">new</span>;<span class="attr">courier</span>;<span class="attr">Georgia</span>=<span class="string">georgia,palatino;Helvetica</span>=<span class="string">helvetica;Impact</span>=<span class="string">impact,chicago;Symbol</span>=<span class="string">symbol;Tahoma</span>=<span class="string">tahoma,arial,helvetica,sans-serif;Terminal</span>=<span class="string">terminal,monaco;Times</span> <span class="attr">New</span> <span class="attr">Roman</span>=<span class="string">times</span> <span class="attr">new</span> <span class="attr">roman</span>,<span class="attr">times</span>;<span class="attr">Verdana</span>=<span class="string">verdana,geneva;Webdings</span>=<span class="string">webdings;Wingdings</span>=<span class="string">wingdings,zapf</span> <span class="attr">dingbats</span>;<span class="attr">知乎配置</span>=<span class="string">BlinkMacSystemFont,</span> <span class="attr">Helvetica</span> <span class="attr">Neue</span>, <span class="attr">PingFang</span> <span class="attr">SC</span>, <span class="attr">Microsoft</span> <span class="attr">YaHei</span>, <span class="attr">Source</span> <span class="attr">Han</span> <span class="attr">Sans</span> <span class="attr">SC</span>, <span class="attr">Noto</span> <span class="attr">Sans</span> <span class="attr">CJK</span> <span class="attr">SC</span>, <span class="attr">WenQuanYi</span> <span class="attr">Micro</span> <span class="attr">Hei</span>, <span class="attr">sans-serif</span>;<span class="attr">小米配置</span>=<span class="string">Helvetica</span> <span class="attr">Neue</span>,<span class="attr">Helvetica</span>,<span class="attr">Arial</span>,<span class="attr">Microsoft</span> <span class="attr">Yahei</span>,<span class="attr">Hiragino</span> <span class="attr">Sans</span> <span class="attr">GB</span>;<span class="attr">Heiti</span> <span class="attr">SC</span>;<span class="attr">WenQuanYi</span> <span class="attr">Micro</span> <span class="attr">Hei</span>,<span class="attr">sans-serif</span>&quot;,</span></span></span><br><span class="line"><span class="tag"><span class="language-xml">          <span class="attr">image_class_list:</span> [</span></span></span><br><span class="line"><span class="tag"><span class="language-xml">            &#123; <span class="attr">title:</span> &#x27;<span class="attr">None</span>&#x27;, <span class="attr">value:</span> &#x27;&#x27; &#125;,</span></span></span><br><span class="line"><span class="tag"><span class="language-xml">            &#123; <span class="attr">title:</span> &#x27;<span class="attr">Some</span> <span class="attr">class</span>&#x27;, <span class="attr">value:</span> &#x27;<span class="attr">class-name</span>&#x27; &#125;</span></span></span><br><span class="line"><span class="tag"><span class="language-xml">          ],</span></span></span><br><span class="line"><span class="tag"><span class="language-xml">          <span class="attr">importcss_append:</span> <span class="attr">true</span>,</span></span></span><br><span class="line"><span class="tag"><span class="language-xml">          <span class="attr">media_live_embeds:</span> <span class="attr">true</span>,</span></span></span><br><span class="line"><span class="tag"><span class="language-xml">          <span class="attr">toolbar_drawer:</span> <span class="attr">false</span>,</span></span></span><br><span class="line"><span class="tag"><span class="language-xml">          <span class="attr">remove_trailing_brs:</span> <span class="attr">true</span>, //<span class="attr">删除最尾的br</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml">          <span class="attr">autosave_ask_before_unload:</span> <span class="attr">false</span>, //<span class="attr">此选项允许设置编辑器在尝试关闭当前窗口时是否应提示用户告知他们有未保存的更改</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml">          //<span class="attr">可以粘贴文本带有图片的插件</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml">          // <span class="attr">powerpaste_word_import:</span> &#x27;<span class="attr">propmt</span>&#x27;,</span></span></span><br><span class="line"><span class="tag"><span class="language-xml">          // <span class="attr">powerpaste_html_import:</span> &#x27;<span class="attr">propmt</span>&#x27;,</span></span></span><br><span class="line"><span class="tag"><span class="language-xml">          // <span class="attr">powerpaste_allow_local_images:</span> <span class="attr">true</span>,</span></span></span><br><span class="line"><span class="tag"><span class="language-xml">          // <span class="attr">images_upload_url:</span> &#x27;/<span class="attr">demo</span>/<span class="attr">upimg.php</span>&#x27;,</span></span></span><br><span class="line"><span class="tag"><span class="language-xml">          // <span class="attr">images_upload_base_path:</span> &#x27;/<span class="attr">demo</span>&#x27;,</span></span></span><br><span class="line"><span class="tag"><span class="language-xml">          <span class="attr">images_upload_handler:</span> (<span class="attr">blobInfo</span>, <span class="attr">succFun</span>, <span class="attr">failFun</span>,<span class="attr">progress</span>) =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-xml">            images_upload_handler(blobInfo, succFun, failFun,progress);</span></span><br><span class="line"><span class="language-xml">          &#125;,</span></span><br><span class="line"><span class="language-xml">          video_template_callback: function (data, videoTemplateCallback) &#123;</span></span><br><span class="line"><span class="language-xml">            return `<span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;mce-preview-object mce-object-video&quot;</span> <span class="attr">contenteditable</span>=<span class="string">&quot;false&quot;</span> <span class="attr">data-mce-object</span>=<span class="string">&quot;video&quot;</span> <span class="attr">data-mce-p-allowfullscreen</span>=<span class="string">&quot;allowfullscreen&quot;</span> <span class="attr">data-mce-p-frameborder</span>=<span class="string">&quot;no&quot;</span> <span class="attr">data-mce-p-scrolling</span>=<span class="string">&quot;no&quot;</span> <span class="attr">data-mce-p-src</span>=<span class="string">&#x27;$&#123;data.source&#125;&#x27;</span> <span class="attr">data-mce-p-width</span>=<span class="string">&#x27;$&#123;data.width&#125;&#x27;</span> <span class="attr">data-mce-p-height</span>=<span class="string">&#x27;$&#123;data.height&#125;&#x27;</span> <span class="attr">data-mce-p-controls</span>=<span class="string">&quot;controls&quot;</span> <span class="attr">data-mce-html</span>=<span class="string">&quot;%20&quot;</span>&gt;</span> <span class="tag">&lt;<span class="name">video</span> <span class="attr">width</span>=<span class="string">&#x27;$&#123;data.width&#125;&#x27;</span> <span class="attr">height</span>=<span class="string">&#x27;$&#123;data.height&#125;&#x27;</span> <span class="attr">controls</span>=<span class="string">&quot;controls&quot;</span>&gt;</span> <span class="tag">&lt;<span class="name">source</span> <span class="attr">src</span>=<span class="string">&#x27;$&#123;data.source&#125;&#x27;</span> <span class="attr">type</span>=<span class="string">&#x27;$&#123;data.sourcemime&#125;&#x27;</span>&gt;</span><span class="tag">&lt;/<span class="name">source</span>&gt;</span> <span class="tag">&lt;/<span class="name">video</span>&gt;</span> <span class="tag">&lt;/<span class="name">span</span>&gt;</span>`;</span></span><br><span class="line"><span class="language-xml">          &#125;,</span></span><br><span class="line"><span class="language-xml">          //自定义添加按钮 弹窗事件</span></span><br><span class="line"><span class="language-xml">          setup: function (editor) &#123;</span></span><br><span class="line"><span class="language-xml">            setEditor(editor);</span></span><br><span class="line"><span class="language-xml">            editor.ui.registry.addButton(&#x27;addMedia&#x27;, &#123;</span></span><br><span class="line"><span class="language-xml">              text: &#x27;&#x27;,</span></span><br><span class="line"><span class="language-xml">              icon: &#x27;embed&#x27;,</span></span><br><span class="line"><span class="language-xml">              onAction: () =&gt; addAutoMedia();</span></span><br><span class="line"><span class="language-xml">            &#125;);</span></span><br><span class="line"><span class="language-xml">          &#125;</span></span><br><span class="line"><span class="language-xml">          // file_picker_types: &#x27;media file&#x27;,</span></span><br><span class="line"><span class="language-xml">          //自定义文件选择器的回调内容</span></span><br><span class="line"><span class="language-xml">          // file_picker_callback: function (callback, value, meta) &#123;</span></span><br><span class="line"><span class="language-xml">          //   if (meta.filetype === &#x27;file&#x27;) &#123;</span></span><br><span class="line"><span class="language-xml">          //   &#125;</span></span><br><span class="line"><span class="language-xml">          //   if (meta.filetype === &#x27;image&#x27;) &#123;</span></span><br><span class="line"><span class="language-xml">          //     return message.error(&#x27;请选者视频或者其他类型格式文件&#x27;);</span></span><br><span class="line"><span class="language-xml">          //   &#125;</span></span><br><span class="line"><span class="language-xml">          //   if (meta.filetype === &#x27;media&#x27;) &#123;</span></span><br><span class="line"><span class="language-xml">          //     file_picker_callback(callback, value, meta);</span></span><br><span class="line"><span class="language-xml">          //   &#125;</span></span><br><span class="line"><span class="language-xml">          // &#125;,</span></span><br><span class="line"><span class="language-xml">        &#125;&#125;</span></span><br><span class="line"><span class="language-xml">      /&gt;</span></span><br><span class="line"><span class="language-xml">      <span class="tag">&lt;<span class="name">MediaModal</span> <span class="attr">ref</span>=<span class="string">&#123;mediaRef&#125;</span> <span class="attr">onChangeEditor</span>=<span class="string">&#123;onChangeEditor&#125;</span> /&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;/&gt;</span></span></span><br><span class="line">  );</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title class_">EditorCom</span>;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta"><i class="fas fa-circle-user fa-fw"></i>文章作者: </span><span class="post-copyright-info"><a href="https://leachliu.gitee.io">刘超</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta"><i class="fas fa-square-arrow-up-right fa-fw"></i>文章链接: </span><span class="post-copyright-info"><a href="https://leachliu.gitee.io/2022/08/11/react/%E4%BD%BF%E7%94%A8tinymce%E5%AF%8C%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91%E5%99%A8/">https://leachliu.gitee.io/2022/08/11/react/%E4%BD%BF%E7%94%A8tinymce%E5%AF%8C%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91%E5%99%A8/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta"><i class="fas fa-circle-exclamation fa-fw"></i>版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://leachliu.gitee.io" target="_blank">刘超的博客</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/tinymce/">tinymce</a></div><div class="post_share"><div class="social-share" data-image="/images/avatar.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/2022/08/11/react/ant%20desing%20tag%E6%A0%87%E7%AD%BE%E4%BD%BF%E7%94%A8index%E4%BD%9C%E4%B8%BA%E7%B4%A2%E5%BC%95/" title="ant desing tag标签使用index作为索引"><div class="cover" style="background: var(--default-bg-color)"></div><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">ant desing tag标签使用index作为索引</div></div></a></div><div class="next-post pull-right"><a href="/2022/01/28/js/%E5%B8%B8%E8%A7%81%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/" title="常见设计模式"><div class="cover" style="background: var(--default-bg-color)"></div><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">常见设计模式</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/2022/08/11/react/ant%20desing%20tag%E6%A0%87%E7%AD%BE%E4%BD%BF%E7%94%A8index%E4%BD%9C%E4%B8%BA%E7%B4%A2%E5%BC%95/" title="ant desing tag标签使用index作为索引"><div class="cover" style="background: var(--default-bg-color)"></div><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-08-11</div><div class="title">ant desing tag标签使用index作为索引</div></div></a></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="/images/avatar.webp" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">刘超</div><div class="author-info__description">只有自己强大，才不会被别人践踏。</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">41</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">21</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">6</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/xxxxxx"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="http://wpa.qq.com/msgrd?v=3&amp;uin=923946406&amp;site=qq&amp;menu=yes" target="_blank" title="QQ"><i class="fab fa-qq"></i></a><a class="social-icon" href="https://chao-picture-bed.oss-cn-hangzhou.aliyuncs.com/blog/vue/popperJs/202301131417748.jpg" target="_blank" title="Wechat"><i class="fab fa-weixin"></i></a><a class="social-icon" href="/923946406@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a><a class="social-icon" href="https://github.com/tzy13755126023" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="/atom.xml" target="_blank" title="Rss"><i class="fas fa-rss"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content">书山有路勤为径,学海无涯苦作舟</div></div><div class="card-widget tzy-right-widget" id="card-wechat"><div id="flip-wrapper"><div id="flip-content"><div class="face"></div><div class="back face"></div></div></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%96%87%E6%A1%A3"><span class="toc-number">1.</span> <span class="toc-text">文档</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%8B%E8%BD%BDtinymce"><span class="toc-number">2.</span> <span class="toc-text">下载tinymce</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9C%A8public%E4%B8%AD%E5%BC%95%E5%85%A5tinymce%E7%9A%84%E9%9D%99%E6%80%81%E6%96%87%E4%BB%B6"><span class="toc-number">3.</span> <span class="toc-text">在public中引入tinymce的静态文件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%8E%B7%E5%8F%96tinymce%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A1%86%E5%86%85%E5%AE%B9%E7%9A%84%E5%87%A0%E7%A7%8D%E6%96%B9%E5%BC%8F"><span class="toc-number">4.</span> <span class="toc-text">获取tinymce富文本框内容的几种方式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B8%B8%E7%94%A8%E9%85%8D%E7%BD%AE"><span class="toc-number">5.</span> <span class="toc-text">常用配置</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9B%BE%E7%89%87%E4%B8%8A%E4%BC%A0"><span class="toc-number">6.</span> <span class="toc-text">图片上传</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%87%AA%E5%AE%9A%E4%B9%89%E8%8F%9C%E5%8D%95%E6%8C%89%E9%92%AE%E4%B8%8A%E4%BC%A0%E7%85%A7%E7%89%87"><span class="toc-number">7.</span> <span class="toc-text">自定义菜单按钮上传照片</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%89%E9%92%AE"><span class="toc-number">7.1.</span> <span class="toc-text">自定义按钮</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%BC%B9%E7%AA%97%E4%BA%8B%E4%BB%B6%E5%9B%9E%E8%B0%83"><span class="toc-number">7.2.</span> <span class="toc-text">弹窗事件回调</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0"><span class="toc-number">8.</span> <span class="toc-text">文件上传</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B0%81%E8%A3%85%E7%BB%84%E4%BB%B6"><span class="toc-number">9.</span> <span class="toc-text">封装组件</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AE%8C%E6%95%B4%E4%BB%A3%E7%A0%81%E5%A6%82%E4%B8%8B"><span class="toc-number">9.1.</span> <span class="toc-text">完整代码如下</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2023/11/06/comlibary/4.%E7%BB%84%E4%BB%B6%E5%BA%93%E7%B1%BB%E5%90%8D%E6%96%B9%E6%B3%95%E5%AE%9E%E7%8E%B0%E4%BB%A5%E5%8F%8A%E8%A7%84/" title="无题">无题</a><time datetime="2023-11-06T07:16:00.298Z" title="发表于 2023-11-06 15:16:00">2023-11-06</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2023/11/06/comlibary/3.%E6%90%AD%E5%BB%BA%E7%BB%84%E4%BB%B6%E5%BA%93%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83/" title="组件库框架 - 3 搭建组件库开发环境"><img src="/images/beijing4.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="组件库框架 - 3 搭建组件库开发环境"/></a><div class="content"><a class="title" href="/2023/11/06/comlibary/3.%E6%90%AD%E5%BB%BA%E7%BB%84%E4%BB%B6%E5%BA%93%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83/" title="组件库框架 - 3 搭建组件库开发环境">组件库框架 - 3 搭建组件库开发环境</a><time datetime="2023-11-06T06:30:00.000Z" title="发表于 2023-11-06 14:30:00">2023-11-06</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2023/11/06/comlibary/2.%E5%88%9D%E5%A7%8B%E5%8C%96workspace-root/" title="组件库框架 - 2 初始化workspace-root"><img src="/images/beijing4.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="组件库框架 - 2 初始化workspace-root"/></a><div class="content"><a class="title" href="/2023/11/06/comlibary/2.%E5%88%9D%E5%A7%8B%E5%8C%96workspace-root/" title="组件库框架 - 2 初始化workspace-root">组件库框架 - 2 初始化workspace-root</a><time datetime="2023-11-06T03:18:00.000Z" title="发表于 2023-11-06 11:18:00">2023-11-06</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2023/10/27/comlibary/1.%E6%90%AD%E5%BB%BApnpm%E3%80%81monorepo/" title="组件库框架 - 1 搭建pnpn monorepo"><img src="/images/beijing3.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="组件库框架 - 1 搭建pnpn monorepo"/></a><div class="content"><a class="title" href="/2023/10/27/comlibary/1.%E6%90%AD%E5%BB%BApnpm%E3%80%81monorepo/" title="组件库框架 - 1 搭建pnpn monorepo">组件库框架 - 1 搭建pnpn monorepo</a><time datetime="2023-10-27T06:36:00.000Z" title="发表于 2023-10-27 14:36:00">2023-10-27</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2023/01/12/other/%E4%BD%BF%E7%94%A8OSS+PicGo%E6%90%AD%E5%BB%BA%E5%9B%BE%E5%BA%8A/" title="使用OSS+PicGo搭建图床"><img src="https://chao-picture-bed.oss-cn-hangzhou.aliyuncs.com/blog/vue/popperJs/202301121557184.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="使用OSS+PicGo搭建图床"/></a><div class="content"><a class="title" href="/2023/01/12/other/%E4%BD%BF%E7%94%A8OSS+PicGo%E6%90%AD%E5%BB%BA%E5%9B%BE%E5%BA%8A/" title="使用OSS+PicGo搭建图床">使用OSS+PicGo搭建图床</a><time datetime="2023-01-12T07:39:00.000Z" title="发表于 2023-01-12 15:39:00">2023-01-12</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2023  <i id="heartbeat" class="fa fas fa-heartbeat"></i> 刘超</div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside-config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.umd.min.js"></script><div class="js-pjax"></div><canvas id="universe"></canvas><script defer src="/js/universe.js"></script><script defer src="https://fastly.jsdelivr.net/npm/hexo-theme-volantis@latest/source/js/issues.min.js"></script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><div id="algolia-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="search-wrap"><div id="algolia-search-input"></div><hr/><div id="algolia-search-results"><div id="algolia-hits"></div><div id="algolia-pagination"></div><div id="algolia-info"><div class="algolia-stats"></div><div class="algolia-poweredBy"></div></div></div></div></div><div id="search-mask"></div><script src="https://cdn.jsdelivr.net/npm/algoliasearch/dist/algoliasearch-lite.umd.min.js"></script><script src="https://cdn.jsdelivr.net/npm/instantsearch.js/dist/instantsearch.production.min.js"></script><script src="/js/search/algolia.js"></script></div></div><!-- hexo injector body_end start --><script async src="//at.alicdn.com/t/font_2032782_8d5kxvn09md.js"></script><!-- hexo injector body_end end --></body></html>